<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>新闻管理 - 智慧农业信息管理系统</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <style>
        body {
            font-family: 'Microsoft YaHei', sans-serif;
            background-color: #f8f9fa;
        }
        
        .navbar {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        
        .navbar-brand, .navbar-nav .nav-link {
            color: white !important;
        }
        
        .sidebar {
            position: fixed;
            top: 56px;
            bottom: 0;
            left: 0;
            z-index: 100;
            padding: 20px 0;
            background: white;
            box-shadow: 2px 0 10px rgba(0,0,0,0.1);
            overflow-y: auto;
        }
        
        .sidebar .nav-link {
            color: #333;
            padding: 12px 20px;
            border-left: 3px solid transparent;
            transition: all 0.3s;
        }
        
        .sidebar .nav-link:hover,
        .sidebar .nav-link.active {
            color: #667eea;
            background-color: #f8f9fa;
            border-left-color: #667eea;
        }
        
        .sidebar .nav-link i {
            width: 20px;
            margin-right: 10px;
        }
        
        main {
            margin-top: 56px;
            padding-top: 20px;
        }
        
        .btn-primary {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border: none;
        }
        
        .btn-primary:hover {
            opacity: 0.9;
        }
        
        .news-card {
            background: white;
            border-radius: 10px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            transition: all 0.3s;
        }
        
        .news-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 5px 20px rgba(0,0,0,0.15);
        }
        
        .news-badge {
            display: inline-block;
            padding: 3px 10px;
            border-radius: 12px;
            font-size: 0.85rem;
            margin-right: 10px;
        }
        
        .badge-announcement {
            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
            color: white;
        }
        
        .badge-news {
            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
            color: white;
        }
        
        .badge-notice {
            background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
            color: white;
        }
        
        .modal-header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
        }
        
        .image-preview {
            max-width: 100%;
            max-height: 300px;
            margin-top: 10px;
            border-radius: 8px;
        }
        
        .news-title {
            font-size: 1.2rem;
            font-weight: bold;
            color: #333;
            margin-bottom: 10px;
        }
        
        .news-meta {
            color: #999;
            font-size: 0.9rem;
            margin-bottom: 10px;
        }
        
        .news-summary {
            color: #666;
            line-height: 1.6;
        }
        
        .top-badge {
            background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
            color: white;
            padding: 2px 8px;
            border-radius: 10px;
            font-size: 0.75rem;
            margin-left: 5px;
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark fixed-top">
        <div class="container-fluid">
            <a class="navbar-brand" href="/index">
                <i class="fas fa-leaf"></i> 智慧农业信息管理系统
            </a>
            <div class="navbar-nav ms-auto">
                <span class="navbar-text text-white me-3">
                    <i class="fas fa-user-circle"></i>
                    欢迎，<span th:text="${session.currentUser.realName}">用户</span>
                </span>
                <a class="nav-link text-white" href="/logout">
                    <i class="fas fa-sign-out-alt"></i> 退出
                </a>
            </div>
        </div>
    </nav>

    <div class="container-fluid">
        <div class="row">
            <!-- 侧边栏 -->
            <nav class="col-md-2 d-md-block sidebar">
                <div class="position-sticky">
                    <ul class="nav flex-column">
                        <li class="nav-item">
                            <a class="nav-link" href="/index">
                                <i class="fas fa-home"></i> 首页
                            </a>
                        </li>
                        
                        <!-- 管理员菜单 -->
                        <div th:if="${session.currentUser.role == 'admin'}">
                            <li class="nav-item">
                                <a class="nav-link" href="/user/list">
                                    <i class="fas fa-users"></i> 用户管理
                                </a>
                            </li>
                        </div>
                        
                        <!-- 农场主和管理员菜单 -->
                        <div th:if="${session.currentUser.role == 'admin' || session.currentUser.role == 'manager'}">
                            <li class="nav-item">
                                <a class="nav-link" href="/field/list">
                                    <i class="fas fa-map"></i> 地块管理
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="/crop/list">
                                    <i class="fas fa-seedling"></i> 作物管理
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="/material/list">
                                    <i class="fas fa-boxes"></i> 农资管理
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="/plan/list">
                                    <i class="fas fa-calendar-alt"></i> 种植计划
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="/farming/list">
                                    <i class="fas fa-tractor"></i> 农事记录
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="/monitor/list">
                                    <i class="fas fa-chart-line"></i> 生长监测
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="/product/list">
                                    <i class="fas fa-box"></i> 产品管理
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="/sales/list">
                                    <i class="fas fa-shopping-cart"></i> 销售记录
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="/statistics/dashboard">
                                    <i class="fas fa-chart-bar"></i> 数据统计
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link active" href="/news/list">
                                    <i class="fas fa-bullhorn"></i> 新闻公告
                                </a>
                            </li>
                        </div>
                        
                        <!-- 所有用户可见 -->
                        <li class="nav-item">
                            <a class="nav-link" href="/farm/display">
                                <i class="fas fa-store"></i> 农场展示
                            </a>
                        </li>
                    </ul>
                </div>
            </nav>

            <!-- 主内容区 -->
            <main class="col-md-10 ms-sm-auto px-md-4">
                <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3">
                    <h1 class="h2"><i class="fas fa-bullhorn"></i> 新闻公告管理</h1>
                    <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#newsModal" onclick="resetForm()">
                        <i class="fas fa-plus"></i> 发布新闻
                    </button>
                </div>

                <!-- 新闻列表 -->
                <div th:if="${newsList != null and !newsList.isEmpty()}">
                    <div class="news-card" th:each="news : ${newsList}">
                        <div class="d-flex justify-content-between align-items-start">
                            <div class="flex-grow-1">
                                <div>
                                    <span class="news-badge" 
                                          th:classappend="${news.type == 'announcement' ? 'badge-announcement' : (news.type == 'news' ? 'badge-news' : 'badge-notice')}"
                                          th:text="${news.type == 'announcement' ? '公告' : (news.type == 'news' ? '新闻' : '通知')}">类型</span>
                                    <span class="top-badge" th:if="${news.isTop == 1}">
                                        <i class="fas fa-thumbtack"></i> 置顶
                                    </span>
                                </div>
                                <div class="news-title" th:text="${news.title}">新闻标题</div>
                                <div class="news-meta">
                                    <i class="fas fa-user"></i> <span th:text="${news.author}">作者</span>
                                    <span class="ms-3"><i class="fas fa-calendar"></i> 
                                        <span th:text="${#temporals.format(news.publishTime, 'yyyy-MM-dd HH:mm')}">发布时间</span>
                                    </span>
                                    <span class="ms-3"><i class="fas fa-eye"></i> <span th:text="${news.viewCount}">0</span></span>
                                    <span class="ms-3">
                                        <span th:if="${news.status == 1}" class="badge bg-success">已发布</span>
                                        <span th:if="${news.status == 0}" class="badge bg-secondary">草稿</span>
                                    </span>
                                </div>
                                <div class="news-summary" th:text="${news.summary}">新闻摘要...</div>
                            </div>
                            <div class="ms-3">
                                <button class="btn btn-sm btn-outline-primary me-1" 
                                        th:onclick="'editNews(' + ${news.id} + ')'">
                                    <i class="fas fa-edit"></i>
                                </button>
                                <button class="btn btn-sm btn-outline-success me-1" 
                                        th:if="${news.status == 0}"
                                        th:onclick="'publishNews(' + ${news.id} + ')'">
                                    <i class="fas fa-paper-plane"></i>
                                </button>
                                <button class="btn btn-sm btn-outline-danger" 
                                        th:onclick="'deleteNews(' + ${news.id} + ')'">
                                    <i class="fas fa-trash"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                <div th:if="${newsList == null or newsList.isEmpty()}" class="alert alert-info text-center">
                    <i class="fas fa-info-circle fa-2x mb-2"></i>
                    <p>暂无新闻信息，请点击"发布新闻"按钮添加</p>
                </div>
            </main>
        </div>
    </div>

    <!-- 新闻编辑模态框 -->
    <div class="modal fade" id="newsModal" tabindex="-1">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">
                        <i class="fas fa-newspaper"></i> 新闻信息
                    </h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <form id="newsForm">
                        <input type="hidden" id="newsId" name="id">
                        <div class="row">
                            <div class="col-md-8 mb-3">
                                <label class="form-label">标题 <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="title" name="title" required>
                            </div>
                            <div class="col-md-4 mb-3">
                                <label class="form-label">类型 <span class="text-danger">*</span></label>
                                <select class="form-select" id="type" name="type" required>
                                    <option value="announcement">公告</option>
                                    <option value="news">新闻</option>
                                    <option value="notice">通知</option>
                                </select>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">作者</label>
                                <input type="text" class="form-control" id="author" name="author">
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">是否置顶</label>
                                <select class="form-select" id="isTop" name="isTop">
                                    <option value="0">否</option>
                                    <option value="1">是</option>
                                </select>
                            </div>
                            <div class="col-12 mb-3">
                                <label class="form-label">摘要</label>
                                <textarea class="form-control" id="summary" name="summary" rows="2"></textarea>
                            </div>
                            <div class="col-12 mb-3">
                                <label class="form-label">封面图片</label>
                                <input type="file" class="form-control" id="coverFile" accept="image/*" onchange="previewCover(this)">
                                <input type="hidden" id="coverImage" name="coverImage">
                                <img id="coverPreview" class="image-preview" style="display: none;">
                            </div>
                            <div class="col-12 mb-3">
                                <label class="form-label">正文内容 <span class="text-danger">*</span></label>
                                <textarea class="form-control" id="content" name="content" rows="6" required></textarea>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-outline-primary" onclick="saveNews(0)">
                        <i class="fas fa-save"></i> 保存草稿
                    </button>
                    <button type="button" class="btn btn-primary" onclick="saveNews(1)">
                        <i class="fas fa-paper-plane"></i> 发布
                    </button>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
    <script th:inline="javascript">
        const currentUser = /*[[${session.currentUser}]]*/ {};
        
        function resetForm() {
            $('#newsForm')[0].reset();
            $('#newsId').val('');
            $('#coverPreview').hide().attr('src', '');
            $('#coverImage').val('');
            $('#author').val(currentUser.realName);
        }

        function previewCover(input) {
            if (input.files && input.files[0]) {
                const file = input.files[0];
                const formData = new FormData();
                formData.append('file', file);

                // 上传图片
                $.ajax({
                    url: '/upload',
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function(res) {
                        if (res.code === 200) {
                            $('#coverImage').val(res.data);
                            $('#coverPreview').attr('src', res.data).show();
                        } else {
                            alert('图片上传失败: ' + res.message);
                        }
                    },
                    error: function() {
                        alert('图片上传失败，请重试');
                    }
                });
            }
        }

        function saveNews(status) {
            const formData = {
                id: $('#newsId').val() || null,
                title: $('#title').val(),
                type: $('#type').val(),
                author: $('#author').val(),
                isTop: parseInt($('#isTop').val()),
                summary: $('#summary').val(),
                coverImage: $('#coverImage').val(),
                content: $('#content').val(),
                status: status
            };

            $.ajax({
                url: '/news/save',
                type: 'POST',
                contentType: 'application/json',
                data: JSON.stringify(formData),
                success: function(res) {
                    if (res.code === 200) {
                        alert(status === 1 ? '发布成功！' : '保存成功！');
                        location.reload();
                    } else {
                        alert('保存失败: ' + res.message);
                    }
                },
                error: function() {
                    alert('保存失败，请重试');
                }
            });
        }

        function editNews(id) {
            $.get('/news/detail/' + id, function(res) {
                if (res.code === 200) {
                    const n = res.data;
                    $('#newsId').val(n.id);
                    $('#title').val(n.title);
                    $('#type').val(n.type);
                    $('#author').val(n.author);
                    $('#isTop').val(n.isTop);
                    $('#summary').val(n.summary);
                    $('#coverImage').val(n.coverImage);
                    $('#content').val(n.content);
                    if (n.coverImage) {
                        $('#coverPreview').attr('src', n.coverImage).show();
                    }
                    $('#newsModal').modal('show');
                } else {
                    alert('获取新闻信息失败');
                }
            });
        }

        function publishNews(id) {
            if (confirm('确定要发布这条新闻吗？')) {
                $.post('/news/publish/' + id, function(res) {
                    if (res.code === 200) {
                        alert('发布成功！');
                        location.reload();
                    } else {
                        alert('发布失败: ' + res.message);
                    }
                });
            }
        }

        function deleteNews(id) {
            if (confirm('确定要删除这条新闻吗？')) {
                $.ajax({
                    url: '/news/delete/' + id,
                    type: 'POST',
                    success: function(res) {
                        if (res.code === 200) {
                            alert('删除成功！');
                            location.reload();
                        } else {
                            alert('删除失败: ' + res.message);
                        }
                    },
                    error: function() {
                        alert('删除失败，请重试');
                    }
                });
            }
        }
    </script>
</body>
</html>
